<template>
  <div class="container">
     <div class="section">
       <input type="text" name="search" placeholder="搜索" placeholder-style="text-align:center;font-size:16px" class="search"  @input="search1"/>
     </div>
     <ul>
       <li v-for="value in daka_user_list">
         <img :src="value.photo_url"/>
         <span class="nickname">{{value.nickname}}</span>
         <span  class="data_time">{{value.data_time}} 加入</span>
       </li>
     </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      daka_user_list:[],
      searchContent:'',
    }
  },
  methods:{
   search1(e){
     var searchValue=e.target.value;
     this.daka_user_list=[]
     for(var i=0;i<this.details.daka_user_list.length;i++)
    {
       if(this.details.daka_user_list[i].nickname.indexOf(searchValue) != -1)
       {
        this.pushPeople(this.details.daka_user_list[i])
       }
    } 
   },
   pushPeople(value){
            this.daka_user_list.push({
          "id":value.id,
          "photo_url":value.photo_url,
          "nickname":value.nickname,
           "data_time":value.join_time
      })
   }
  },
  created () {
    for(var i=0;i<this.details.daka_user_list.length;i++)
    {
      this.pushPeople(this.details.daka_user_list[i])
    }
  },
  computed:{
    details(){
      return this.$store.state.details.data.data;
    }
  }
}
</script>

<style scoped>
.search{width: 94%;height: 36px;border:1px solid #bfbfb9; border-radius: 6px;margin-left: 2%;background: #fff;margin-right: 2%;text-align: center;margin-top: 5px;font-size: 16px}
ul{width: 97%;margin-left: 3%;}
li{width: 100%;height: 65px;display: flex;justify-content: row}
li img{width: 45px;height: 45px;display: block;margin-left: 5px;margin-top:14px;border-radius: 45px;}
li span.data_time{width: 130px;height: 30px;margin-left: 22%;font-size: 13px;line-height: 30px;margin-top: 19px}
li span.nickname{width: 140px;height: 30px;line-height: 30px;margin-top: 19px;margin-left: 3%;font-size: 14px}
</style>
